@charset "UTF-8";
/** .slider {
	float: left;
	width: 300px;
	height: 100vh;
	border-right: 1px solid #ccc;
	text-align: center;
	padding-top: 50px;
} */

.align {
	position: absolute;
	left: 0;
	top: 150px;
	z-index: 99;
	width: 100%;
	height: 100%;
	text-align: center;
}

.v-enter {
	opacity: 0;
}

.v-enter-to {
	opacity: 1;
}

.v-enter-active {
	transition: .5s all ease-in-out;
	-webkit-transition: .5s all ease-in-out;
}

.v-leave {
	opacity: 1;
}

.v-leave-to {
	opacity: 0;
}

.v-leave-active {
	transition: .5s all ease-in-out;
	-webkit-transition: .5s all ease-in-out;
}

.left-enter {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}

.left-enter-to {
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.left-enter-active,
.left-leave-active {
	transition: 1s all ease-in-out;
	-webkit-transition: 1s all ease-in-out;
}

.left-leave {
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.left-leave-to {
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}

.right-enter {
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}

.right-enter-to {
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.right-enter-active,
.right-leave-active {
	transition: 1s all ease-in-out;
	-webkit-transition: 1s all ease-in-out;
}

.right-leave {
	transform: translateX(0);
	-webkit-transform: translateX(0);
}

.right-leave-to {
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
}